import Footer from './component/Footer'
import Header from './component/Header'
import List from './component/List'
import React, { Component } from 'react'
import './app.css'
export default class App extends Component {
	state = {
		todos: [{
			id: "001",
			name: "吃饭",
			done: true
		},
		{
			id: "002",
			name: "睡觉",
			done: true
		},
		{
			id: "003",
			name: "打代码",
			done: false
		}]
	}
	//获取todolist值
	getValue = (val) => {
		const { todos } = this.state;
		let newTodos = [{
			id: Date.now(),
			name: val,
			done: false
		}, ...todos]
		this.setState({
			todos: newTodos
		})
	}
	//更新todolist,checked状态
	updateTodo = (id, done) => {
		const { todos } = this.state
		const newTodos = todos.map(todo => {
			if (id === todo.id) {
				return { ...todo, done }
			} else {
				return todo
			}
		})
		this.setState({
			todos: newTodos
		})
	}
	//删除todolist
	deleteTodo = (id) => {
		const { todos } = this.state
		const newTodos = todos.filter(todo =>
			todo.id !== id
		)
		this.setState({
			todos: newTodos
		})
	}
	//全选或全不选
	handleCheckALL = (bool) => {
		const { todos } = this.state
		const newTodos = todos.map(todo => {
			return { ...todo, done: bool }
		})
		this.setState({
			todos: newTodos
		})
	}
	deleteFinished = () => {
		const { todos } = this.state
		const newTodos = todos.filter(todo =>
			!todo.done
		)
		this.setState({
			todos: newTodos
		})
	}
	render() {
		const { todos } = this.state
		return (
			<div className="app">
				<Header addTodo={this.getValue} />
				<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
				<Footer todos={todos} handleCheckALL={this.handleCheckALL} deleteFinished={this.deleteFinished} />
			</div>
		);
	}

}
